<template>
  <div class="app-home">
    <div class="home" @click="bodyHindAndShow">
      <div class="setting"><img src="~@/assets/img/setting.png" /></div>
    </div>
    <div class="home-cone" @click="coneHindAndShow">
      <div class="setting-cone"><img :src="coneimg" :alt="conealt" /></div>
    </div>
    <div class="home-op" v-show="homeOp">
      <div style="width: 140px">
        <el-button size="mini" type="success" :disabled="opdisable" style="background-color:#19BD85;color:#fff;width: 60px;height: 24px;padding: 4px 3px" @click="plop(1)">批量处理</el-button>
        <el-button size="mini" type="info" :disabled="opdisable" style="color:#fff;width: 60px;height: 24px;padding: 4px 3px" @click="plop(2)">批量忽略</el-button>
      </div>
    </div>
    <div class="amap-list-body" :style="bodystyle">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 10px">
        <el-tab-pane label="实时监控" name="first">
          <el-table
            ref="userDeviceStateTable"
            :data="tableData"
            style="width: 435px;"
            height="190px"
            :cell-style="cellStyle"
            :header-cell-style="headerCellStyle"
            @select="onTableSelect"
            :key="Math.random()"
            @select-all="handleSelectionChange">
            <el-table-column
              type="selection" label="" width="40px" :show-overflow-tooltip="false">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名" width="250px" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{scope.row.name}}
                  <span v-if="scope.row.role==1">(技工)</span>
                  <span v-if="scope.row.role==2">(安全员)</span>
                  <span v-if="scope.row.role==3">(监理)</span>
                  <span v-if="scope.row.role==4">(负责人)</span>
                  <span v-if="scope.row.role==5">(班长)</span>
                  <span v-if="scope.row.role==6">(作业人员)</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"  :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <span v-if="scope.row.state==2" class="state-success">离线</span>
                <span v-if="scope.row.state==1" class="state-primary">在线</span>
                <span v-if="scope.row.state==0" >未知</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-page">
            <div class="van-page" style="display: inline-flex;font-size: 9px;padding-top: 5px;margin-left: 20px;">
              <img src='/static/img/z.png' style="height: 14px;cursor: pointer" @click="perPage">
              <span style="padding-left: 6px;padding-right: 6px;">{{currentPage}}</span>/<span style="color: #1c7cd5;padding-left: 6px;padding-right: 6px;">{{totalPage}}</span>
              <img src='/static/img/y.png' style="height:14px;cursor: pointer" @click="nextPage">
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="实时告警" name="second">
          <el-table
            ref="newUserWarning"
            :data="userWarnning"
            style="width: 435px;"
            height="190px"
            :key="Math.random()"
            :cell-style="cellStyle"
            :header-cell-style="headerCellStyle">
            <el-table-column
              type="selection" label="" width="40px" :show-overflow-tooltip="false">
            </el-table-column>
            <el-table-column
              prop="onwername"
              label="姓名" width="70px" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="报警类型" width="130px" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
              label="处理/忽略" :show-overflow-tooltip="false">
              <template slot-scope="scope">
                <el-row>
                <el-button type="success" style="border-radius:2px;background-color:#19BD85;width: 36px;height:20px;font-size: 12px;padding: 0" @click="doWarning(scope.$index,scope.row.id,1)">处理</el-button>
                <el-button type="info" style="border-radius:2px;background-color:#888888;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px 2px 2px 10px" @click="doWarning(scope.$index,scope.row.id,2)">忽略</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-page" style="display: inline-flex;margin-left: 140px;">
            <div class="van-page">
              <div class="van-page" style="display: inline-flex;font-size: 9px;padding-top: 5px;margin-left: 10px;">
                <img src='/static/img/z.png' style="height: 14px;cursor: pointer" @click="perPageWarning">
                <span style="padding-left: 6px;padding-right: 6px;">{{totalPageWarning==0?'-':currentPageWarning}}</span>/<span style="color: #1c7cd5;padding-left: 6px;padding-right: 6px;">{{totalPageWarning}}</span>
                <img src='/static/img/y.png' style="height:14px;cursor: pointer" @click="nextPageWarning">
              </div>
            </div>
            <div style="width: 100px; margin-left: 75px;">
              <el-button size="mini" style="color:#1c7cd5;border-radius:2px;border:1px solid #1c7cd5;width: 65px;height: 22px;padding: 4px 2px" @click="hindAndShwo()">操作记录</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>
    <div class="warning-list-body warring-body-animall" :style="style">
      <el-table
        ref="userWarnningTable"
        :data="oldWarnning"
        style="width: 420px;"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle">
        <el-table-column
          prop="onwername"
          label="姓名" width="60px" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="报警类型" width="130px" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="state"
          label="处理/忽略" width="80px" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            <span v-if="scope.row.state==1">处理</span>
            <span v-if="scope.row.state==2">忽略</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="processTime"
          label="时间" width="150px" :show-overflow-tooltip="false">
          <template slot-scope="scope">
            {{scope.row.processTime | timestampToDate}}
          </template>
        </el-table-column>
      </el-table>
      <div class="table-page">
        <div class="van-page" style="display: inline-flex;font-size: 9px;padding-top: 5px;margin-left: 20px;">
          <img src='/static/img/z.png' style="height: 14px;cursor: pointer" @click="perPageOld">
          <span style="padding-left: 6px;padding-right: 6px;">{{currentPageOld}}</span>/<span style="color: #1c7cd5;padding-left: 6px;padding-right: 6px;">{{totalPageOld}}</span>
          <img src='/static/img/y.png' style="height:14px;cursor: pointer" @click="nextPageOld">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  name: "Home",
  data(){
      return{
        opdisable:false,
        homeOp:false,
        timer: '',
        activeName: 'first',
        activeIndex: '1',
        currentPage: 1,
        pageSize:4,
        totalPage:1,
        currentPageWarning: 1,
        pageWarningSize:4,
        totalPageWarning:1,
        currentPageOld: 1,
        pageOldSize:5,
        totalPageOld:1,
        style:'display:none',
        bodystyle:'display:block',
        startInterval: '',
        tableData: [],
        userWarnning: [],
        oldWarnning: [],
        openInfoId:undefined,
        coneimg:'/static/img/coneopen.png',
        conealt:'open',
        cones:[],
        fence:[],
        polygons:[],
        markPoint:[],
        ip:'',
        selectid:[]
      }
  },
  mounted () {
    let __this = this
    let pageData = {"page":__this.currentPage,"size":__this.pageSize};
    let config = {
      headers: {'Content-Type': 'application/json'}
    }
    this.axios.post("device/pageUserState", pageData, config).then((res)=>{
      __this.currentPage = res.data.page
      __this.tableData = res.data.items
      __this.totalPage = res.data.total
    })

    let pageWarningData = {"page":__this.currentPageWarning,"size":__this.pageWarningSize};
    this.axios.post("warning/pageUserWarnning", pageWarningData, config).then((res)=>{
      __this.currentPageWarning = res.data.page
      __this.userWarnning = res.data.items
      __this.totalPageWarning = res.data.total
      if(__this.userWarnning.length >0){
        __this.opdisable = false
      }else{
        __this.opdisable = true
      }
    })

    let pageWarningOld = {"page":__this.currentPageOld,"size":__this.pageOldSize};
    this.axios.post("warning/pageOldWarnning", pageWarningOld, config).then((res)=>{
      __this.currentPageOld = res.data.page
      __this.oldWarnning = res.data.items
      __this.totalPageOld = res.data.total
    })

    //获取围栏并显示
    this.axios.get("fence/listFences").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        let wei = result.result
        if(wei.length>0) {
          for (let i=0;i<wei.length;i++){
            if(wei[i].ptNum>=3) {
              let weis = wei[i].points
              if (weis == null)
                continue
              let arrwei = weis.split(",");
              let po = []
              for (let j = 0; j < arrwei.length - 1; j++) {
                let p = [];
                p.push(arrwei[j])
                p.push(arrwei[++j])
                po.push(p)
              }
              __this.fence.push(po)

              //筒锥生成的围栏显示筒锥位置
              if (wei[i].source == 0) {
                //是否圆形
                if (wei[i].ptNum == 73) {
                  let yuandian = []
                  yuandian.push((parseFloat(arrwei[0]) + parseFloat(arrwei[72])) / 2)
                  yuandian.push((parseFloat(arrwei[1]) + parseFloat(arrwei[73])) / 2)
                  __this.createMarkerPoint(yuandian)
                } else {
                  for(let s=0;s<po.length;s++){
                    __this.createMarkerPoint(po[s])
                  }
                }
              }
            }
          }
        }
      }
      __this.fencexs()
    }).catch(function (error) {
      console.log(error)
    })

    this.timer = setInterval(this.task, 30000)
  },
  updated() {
    let __this = this
    if(global.markerMap == null){
      global.markerMap=new Map()
    }
    // __this.$nextTick(()=> {
      __this.tableData.forEach(row => {
        let marker = global.markerMap.get(row.id)
        if (marker != null) {
          __this.$refs.userDeviceStateTable.toggleRowSelection(row, true)
        }
      })
    // })
  },
  filters:{
    timestampToDate (cjsj,time=false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
      var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
      var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
      var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
      return Y+M+D+h+m+s
    },
    toFixedOne(num){
      return num.toFixed(1)
    }
  },
  methods:{
    hindAndShwo(){
      if(this.style=="display:none")
        this.style = "display:block"
      else
        this.style = "display:none"
    },
    bodyHindAndShow(){
      this.style = "display:none"
      if(this.bodystyle=="display:none")
        this.bodystyle = "display:block"
      else
        this.bodystyle = "display:none"
      this.playAudio()
    },
    taskConeshow(){
      let that = this
      //console.log(that.conealt)
      if (that.conealt == "close") {
        global.map.remove(that.cones)
        //开启锥桶显示
        this.axios
          .get("cone/listCone ")
          .then(function (response) {
            let result = response.data
            if (result.code == "200") {
              let listCones = result.result
              if (listCones != null && listCones.length > 0) {
                listCones.forEach((row) => {
                  let m = that.createMarker1(row)
                  that.cones.push(m)
              })
              }
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    coneHindAndShow(){
      let that = this
       if(that.conealt=='open'){
         that.conealt = 'close'
         that.coneimg = '/static/img/coneclose.png'
         //开启锥桶显示
         this.axios.get("cone/listCone ").then(function (response) {
           let result = response.data
           if(result.code=='200'){
             let listCones = result.result
             if(listCones!=null&&listCones.length>0){
               listCones.forEach((row)=>{
                 let m = that.createMarker1(row)
                 that.cones.push(m);
               })

               global.map.setZoom(16)
               global.map.panTo(that.cones[0].getPosition())
             }
           }
         }).catch(function (error) {
           console.log(error)
         })

       }else{
         that.conealt = 'open'
         that.coneimg = '/static/img/coneopen.png'
         global.map.remove(that.cones)
         that.cones=[]
         //that.fenceClose()
       }
    },

    plop(state){
      let that = this
      let label = ""
      let msg = ""
      if(state==1){
        label = "你确实要批量处理所有告警吗？"
        msg = "告警已批量处理！"
      }
      if(state==2){
        label = "你确实要批量忽略所有告警吗？"
        msg = "告警已批量忽略！"
      }
      that.$confirm(label, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.axios.get("warning/plOp?op=1").then(function (response) {
          that.$message({
            message: msg,
            type: 'success',
            offset:'300'
          });
          that.listUserWarning(that.currentPageWarning)
          that.listOldWarning(that.currentPageOld)
          that.opdisable = true
        })
      })
    },

    fenceClose(){
      if(this.polygons.length>0) {
        global.map.remove(this.polygons)
        this.polygons.splice(0)
        this.fence.splice(0)
        this.polygons = [];
        this.fence = [];
      }
    },
    fencexs(){
      let _this = this
      for(let i=0;i<_this.fence.length;i++){
        let path = _this.fence[i]
        let polygon = new AMap.Polygon({
          path: path,
          strokeColor: "#1791fc",
          strokeWeight: 2,
          strokeOpacity: 0.2,
          fillOpacity: 0.5,
          fillColor: '#1791fc',
          zIndex: 50,
        })
        _this.polygons.push(polygon)
      }
      global.map.add(_this.polygons)
    },

    handleClick(tab, event) {
      let el = tab.$el;
      if(el.id=="pane-first" && this.style=="display:block") {
        this.style = "display:none"

      }
      if(this.activeName == 'first'){
        this.homeOp = false
      }else{
        this.homeOp = true
      }
    },
    cellStyle(row,column,rowIndex,columnIndex){
      return "text-align:left;height:38px;"
    },
    headerCellStyle(row,rowIndex){
      return "text-align:left;height:38px;"
    },
    homeload(){
      console.log(global.map)
    },
    handleSelectionChange(val) {
      console.log(val)
      if(val.length>0) {
        this.addMarkers(val)
      }else{
        //markerMap.clear()
        global.markerMap.clear()
        let overlays = map.getAllOverlays("marker");
        global.map.remove(overlays);
      }
    },
    onTableSelect(rows, row) {
      var that = this;
      let selected = rows.length!=0 && rows.indexOf(row) !== -1
      console.log(rows)
      console.log(row)
      //选中查询信息
      if(selected.length > 0)
        that.selectid.splice(0,that.selectid.length);
      for(var i=0;i<rows.length;i++){
        that.selectid[i] = rows[i].id
      }
      that.axios
        .get("device/getUserStateById?ID=" + row.id)
        .then(function(response) {
          let result = response.data
          row = result.result
          //如果地图坐标点为空，跳过循环
          if (row.lon == null) {
            that.$message({
              message: "用户没有位置点！",
              type: "warning",
              offset: "300",
            })
          } else {
            if (selected) {
              let lnglat = []
              lnglat.push(row.lon2)
              lnglat.push(row.lat2)
              let marker = that.createMarker(row)
              global.markerMap.set(row.id, marker)
              global.map.panTo(lnglat)
            } else {
              if (that.openInfoId == row.id) {
                that.closeInfoWindow()
                that.openInfoId = undefined
              }
              let lnglat = []
              lnglat.push(row.lon2)
              lnglat.push(row.lat2)
              let marker = global.markerMap.get(row.id)
              global.map.remove(marker)
              global.markerMap.delete(row.id)
            }
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    addMarkers(val){
      for(var v of val){
        //如果地图坐标点为空，跳过循环
        if(v.lon==null)
          continue
        // 创建点实例
        let marker = this.createMarker(v)
        global.markerMap.set(v.id, marker)
      }
    },
    getMarker(markerId){
      let overlays = map.getAllOverlays("marker");
      for(var i = 0; i < overlays.length; i++){
        // 获取存在每个 extData 中的 id
        let id = overlays[i].getExtData().id;
        //如果存在就返回
        if(markerId == id){
          let m = overlays[i]
          return m
        }
      }
    },
    createMarker1(row){
      let lnglat = []
      let marker = {}
      if(row.lon2>=0.5&&row.lon2<180 && row.lat2>=0.5 && row.lat2<90) {
        lnglat.push(row.lon2)
        lnglat.push(row.lat2)

        let icon = ''
        if (row.working == 1) {
          icon = '/static/img/zt1.png'
        } else {
          icon = '/static/img/zt0.png'
        }
        let overlays = map.getAllOverlays("marker");
        for (var i = 0; i < overlays.length; i++) {
          // 获取存在每个 extData 中的 id
          let id = overlays[i].getExtData().id;
          //如果存在就返回
          if (row.id == id) {
            let m = overlays[i]
            m.setPosition(lnglat)
            m.setIcon(icon)
            return m
          }
        }


        marker = new AMap.Marker({
          map: global.map,
          icon: icon,
          position: new AMap.LngLat(lnglat[0], lnglat[1]),
          extData: {
            id: row.id
          },
          offset: new AMap.Pixel(-9, -9),
        });
      }
      return marker
    },

    createMarkerPoint(lnglat) {
      let icon = '/static/img/p.png'
      let marker = new AMap.Marker({
        map: global.map,
        icon: icon,
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        zIndex: 9,
        offset: new AMap.Pixel(-6, -6),
      });
      this.markPoint.push(marker);
    },

    createMarker(row){
      //判断地图上是否存在该marker
      //地图上所有的marker
      let overlays = map.getAllOverlays("marker");
      for(var i = 0; i < overlays.length; i++){
        // 获取存在每个 extData 中的 id
        let id = overlays[i].getExtData().id;
        //如果存在就返回
        if(row.id == id){
          return overlays[i]
        }
      }

      let lnglat = []
      lnglat.push(row.lon2)
      lnglat.push(row.lat2)
      let icon = this.makeIcon(row)
      let marker = new AMap.Marker({
        map: global.map,
        icon:icon,
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        zIndex:99999,
        extData:{
          id: row.id
        }
      });
      marker.setLabel({
        offset: new AMap.Pixel(-34, -2),  //设置文本标注偏移量
        content: "<div class='userLabel'>"+row.name+"(高度："+(row.alt==null?0:row.alt.toFixed(1))+"米)</div>", //设置文本标注内容
        direction: 'right', //设置文本标注方位
      });
      AMap.event.addListener(marker, 'click', () => {
        this.openInfoId = row.id
        this.openInfo(row, marker)
      })
      return marker

    },
    makeIcon(row){
      let icon = ''
      if(row.role==1 || row.role==6){
        if(row.state==1 ){
          if(row.warring <=0){
            icon = '/static/img/4-04-01-36.png'
          }else{
            icon = '/static/img/4-04-02-36.png'
          }

        }else{
          icon = '/static/img/4-04-03-36.png'
        }
      }
      if(row.role==2){
        if(row.state==1){
          if(row.warring <=0){
            icon = '/static/img/3-04-01-36.png'
          }else{
            icon = '/static/img/3-04-02-36.png'
          }
        }else{
          icon = '/static/img/3-04-03-36.png'
        }
      }
      if(row.role==3 || row.role==4 ||row.role==5){
        if(row.state==1){
          if(row.warring <=0){
            icon = '/static/img/2-04-01-36.png'
          }else{
            icon = '/static/img/2-04-02-36.png'
          }
        }else{
          icon = '/static/img/2-04-03-36.png'
        }
      }
      return icon
    },
    // 显示信息窗体
    openInfo (val, vMarker) {
      // if (this.timer) clearInterval(this.timer)
      let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(10, -35)})
      let title = val.name
      let content = []
      //content.push('<span style="color:#f54849">' + val.name + '</span>')
      if(val.state==1) {
        content.push('在线状态：<span style="color:#24BE5A">在线</span>')
      }
      if(val.state==2) {
        content.push('在线状态：<span style="color:#FF580E">离线</span>')
      }
      if(val.state==0 || val==null) {
        content.push('在线状态：<span style="color:#444">未知</span>')
      }

      content.push('状态通知：<span style="color:#1c7cd5">正常</span>')
      if(this.has(val.warringList,4)
        || this.has(val.warringList,5)
        || this.has(val.warringList,8)
        || this.has(val.warringList,9)){
        content.push('工器具使用：<span style="color:#FF580E">异常</span>')
      }else {
        content.push('工器具使用：<span style="color:#1c7cd5">正常</span>')
      }
      if(this.has(val.warringList,1)
        || this.has(val.warringList,2)){
        content.push('围栏预警：<span style="color:#FF580E">有</span>')
      }else {
        content.push('围栏预警：<span style="color:#1c7cd5">无</span>')
      }
      content.push('定位时间：' + this.format(val.recordTime))

      infoWindow.setContent(this.createInfoWindow(title, content.join('<br/>')))
      let lnglat = []
      lnglat.push(val.lon2)
      lnglat.push(val.lat2)
      infoWindow.open(global.map, lnglat)

    },
    has(arr,num) {
      let bool = false; //默认不在数组中
      if(arr!=null && arr.length>0) {
        for (var i = 0, len = arr.length; i < len; i++) { //遍历数组的值
          if (arr[i] === num) {
            bool = true;  //若存在某个值与改值相等，bool值为true
            break
          }
        }
      }
      return bool; //返回bool
    },
    // 构建自定义信息窗体
    createInfoWindow (title, content) {
      var info = document.createElement('div')
      info.className = 'info'

      // 可以通过下面的方式修改自定义窗体的宽高
      // info.style.width = '400px'
      // 定义顶部标题
      let top = document.createElement('div')
      let titleD = document.createElement('div')
      let closeX = document.createElement('img')
      top.className = 'info-top'
      titleD.innerHTML = title
      // closeX.src = ctx + '/static/img/close2.gif'
      closeX.onclick = this.closeInfoWindow()

      top.appendChild(titleD)
      top.appendChild(closeX)
      info.appendChild(top)

      // 定义中部内容
      let middle = document.createElement('div')
      middle.className = 'info-middle'
      middle.style.backgroundColor = 'white'
      middle.innerHTML = content
      info.appendChild(middle)

      let bt = document.createElement('div')
      bt.className = 'info-bt'
      bt.innerHTML='<a href="#">视频连接</a><a href="#" style="margin-left: 18px">语音通话</a>'
      info.appendChild(bt)

      // 定义底部内容
      let bottom = document.createElement('div')
      bottom.className = 'info-bottom'
      bottom.style.position = 'relative'
      bottom.style.top = '0px'
      bottom.style.margin = '0 auto'
      info.appendChild(bottom)
      return info
    },
    closeInfoWindow () {
      map.clearInfoWindow()
    },
    format(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
    },
    add0(m){
      return m<10?'0'+m:m
    },
    uniq(array){
      let temp = []; //一个新的临时数组
      for(let i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
          temp.push(array[i]);
        }
      }
      return temp;
    },
    //告警类型转换
    warnningType(warnning){
      let type = ""
      switch(warnning) {
        case 1:
          type = "电子围栏禁入告警"
          break;
        case 2:
          type = "电子围栏禁出告警"
          break;
        case 3:
          type = "体征异常告警"
          break;
        case 4:
          type = "工器佩戴"
          break;
        case 5:
          type = "高挂低用"
          break;
        case 6:
          type = "SOS报警"
          break;
        case 7:
          type = "跌落"
          break;
        case 8:
          type = "近电提醒"
          break;
        case 9:
          type = "离开近电"
          break;
        case 10:
          type = "安全帽未佩戴"
          break;
        default:
          type=""
      }
      return type
    },
    perPage(){
      if(this.currentPage<=1)
        return
      else{
        this.currentPage--
        this.listUserDate(this.currentPage)
      }
    },
    nextPage(){
      if(this.currentPage>=this.totalPage)
        return
      else{
        this.currentPage++
        this.listUserDate(this.currentPage)
      }
    },

    perPageWarning(){
      if(this.currentPageWarning<=1)
        return
      else{
        this.currentPageWarning--
        this.listUserWarning(this.currentPageWarning)
      }
    },
    nextPageWarning(){
      if(this.currentPageWarning>=this.totalPageWarning)
        return
      else{
        this.currentPageWarning++
        this.listUserWarning(this.currentPageWarning)
      }
    },

    perPageOld(){
      if(this.currentPageOld<=1)
        return
      else{
        this.currentPageOld--
        this.listOldWarning(this.currentPageOld)
      }
    },
    nextPageOld(){
      if(this.currentPageOld>=this.totalPageOld)
        return
      else{
        this.currentPageOld++
        this.listOldWarning(this.currentPageOld)
      }
    },

    listUserDate(cp){
      let pageData = {"page":cp,"size":this.pageSize}
      let config = {
        headers: {'Content-Type': 'application/json'}
      }
      this.axios.post("device/pageUserState", pageData, config).then((res)=>{
        this.currentPage = res.data.page
        this.tableData = res.data.items
        this.totalPage = res.data.total
      })
    },
    listUserWarning(cp){
      let that = this
      let pageWarningData = {"page":cp,"size":that.pageWarningSize}
      let config = {
        headers: {'Content-Type': 'application/json'}
      }
      this.axios.post("warning/pageUserWarnning", pageWarningData, config).then((res)=>{
        that.currentPageWarning = res.data.page
        that.userWarnning = res.data.items
        that.totalPageWarning = res.data.total
        if(that.userWarnning.length >0){
          that.opdisable = false
        }else{
          that.opdisable = true
        }
      })
    },
    listOldWarning(cp){
      let pageWarningOld = {"page":cp,"size":this.pageOldSize}
      let config = {
        headers: {'Content-Type': 'application/json'}
      }
      this.axios.post("warning/pageOldWarnning", pageWarningOld, config).then((res)=>{
        this.currentPageOld = res.data.page
        this.oldWarnning = res.data.items
        this.totalPageOld = res.data.total
      })
    },
    doWarning(index,id,state){
      let label = ""
      let msg = ""
      if(state==1){
        label = "确实要处理此告警吗？"
        msg = "告警已处理！"
      }
      if(state==2){
        label = "确实要忽略此告警吗？"
        msg = "告警已忽略！"
      }
      let warning = {"id":id,"state":state}
      let config = {
        headers: {'Content-Type': 'application/json'}
      }
      this.$confirm(label, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("warning/doWarning", warning, config).then((res) => {
          this.$message({
            message: msg,
            type: 'success',
            offset:'300'
          });
          this.listUserWarning(this.currentPageWarning)
          this.listOldWarning(this.currentPageOld)
          this.listUserDate(this.currentPage)
        })
      }).catch(() => {
      })
    },
    task(){
      let that = this
      that.taskConeshow()
      that.listUserWarning(this.currentPageWarning)
      that.listOldWarning(this.currentPageOld)

      let pageData = {"page":that.currentPage,"size":this.pageSize}
      let config = {
        headers: {'Content-Type': 'application/json'}
      }
      this.axios.post("device/pageUserState", pageData, config).then((res)=>{
        that.currentPage = res.data.page
        that.tableData = res.data.items
        that.totalPage = res.data.total
      })
      if(that.selectid.length>0) {
        let sid = {ids: that.selectid.toString()}
        this.axios.post('device/nowUserState',sid, config).then((res) => {
          that.updateMarker(res.data.result)
        })
      }
    },
    updateMarker(list){
      let that = this
      list.forEach(row => {
        let marker = global.markerMap.get(row.id)
        global.map.clearInfoWindow()
        if(marker!=null) {
          let icon = this.makeIcon(row)
          marker.setIcon(new AMap.Icon({
            image:icon,
            size: new AMap.Size(36, 36), //图标大小
            imageSize: new AMap.Size(36, 36)
          }))

          let lnglat = []
          lnglat.push(row.lon2)
          lnglat.push(row.lat2)
          //marker.moveTo(lnglat,60,function(k){return k})
          marker.setPosition(lnglat)
          AMap.event.addListener(marker, 'click', () => {
            that.openInfoId = row.id
            that.openInfo(row, marker)
          })
          marker.setLabel({
            offset: new AMap.Pixel(-34, -2),  //设置文本标注偏移量
            content: "<div class='userLabel'>"+row.name+"(高度："+(row.alt==null?0:row.alt.toFixed(1))+"米)</div>", //设置文本标注内容
            direction: 'right', //设置文本标注方位
          });
//          if(that.openInfoId == row.id){
//            that.openInfo(row, marker)
//          }
        }
      })
    },

  },
  beforeDestroy() {
    clearInterval(this.timer);
    global.map.clearInfoWindow()
    let overlays = global.map.getAllOverlays("marker");
    global.map.remove(overlays)
    global.markerMap.clear()
    this.fenceClose()
    global.map.remove(this.markPoint)
    this.markPoint = []
  },

}
</script>

<style>
  .home-op{
    position: absolute;
    left: 332px;
    top: 174px;
    z-index: 2000;
  }

  .el-message-box{
    width: 320px;
  }
  .el-message-box__header{
    padding: 5px 5px 5px;
  }
  .el-message-box__title{
    font-size: 14px;
  }
  .el-message-box__headerbtn{
    top: 5px;
  }
  .el-message-box__content{
    font-size: 12px;
  }
  .el-message-box__btns{
    padding: 5px 15px 0;
  }

  .el-message-box__btns .el-button--small{
    padding: 4px 15px;
  }
  .userLabel{
    font-family: "Microsoft YaHei" ! important;
    font-weight: 600;
    color: #1c7cd5;
    height: 25px;
    background-color: #fff;
    border-radius: 18px;
    padding-top: 6px;
    margin-top: -8px;
    width:fit-content;
    width:-moz-fit-content;
    padding-right: 15px;
  }
  .amap-icon{
    z-index: 3;
  }
  .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: 0px solid #fff;
    background-color: white;
    white-space: nowrap;
    cursor: default;
    font-size: 18px;
    line-height: 18px;
    width: 60px;
    height: 20px;
    padding-top: 8px;
    padding-left: 38px;
    border-radius: 18px;
  }
  .home {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 80px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.15rem 0rem;
    z-index: 1999;
    height: 63px;
  }
  .setting{
    background-color: #fff;
    height: 20px;
    line-height: 18px;
    width: 20px;
    cursor:pointer;
    padding: 6px;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  }
  .setting img {
    width: 20px;
    height: 20px;
  }

  .home-cone {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 80px;
    left: 4rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.15rem 0rem;
    z-index: 1999;
    height: 63px;
  }
  .setting-cone{
    background-color: #fff;
    height: 20px;
    line-height: 18px;
    width: 20px;
    cursor:pointer;
    padding: 6px;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  }
  .setting-cone img {
    width: 20px;
    height: 20px;
  }

  .amap-list-body {
    flex-direction: column;
    min-width: 0;
    width: 455px;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 126px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    flex: 1 1 auto;
    padding: 0.15rem 0rem;
    border-radius: 0.4rem;
    height: 266px;
    z-index: 1999;
  }
  .warning-list-body{
    flex-direction: column;
    min-width: 0;
    width: 420px;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 410px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    flex: 1 1 auto;
    padding: 0.15rem 0rem;
    border-radius: 0.4rem;
    height: 264px;
    z-index: 1999;
  }
  .el-tabs__nav-scroll {
    overflow: hidden;
    padding-left: 130px;
  }
  .el-table{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    font-weight: bold;
    color: #000;
  }
  .el-table td, .el-table th{
    padding: 3px 0;
  }
  .el-table-column--selection .cell{
    padding-left: 10px;
  }
  .el-checkbox__inner{
    border: 1px solid #1C7CD5;
  }
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 2px;
  }
  .app-home  .el-table__row td{
    background-color: #fff;
  }
  .state-primary{
    color: #24BE5A;
  }
  .state-success{
    color: #FF580E;
  }
  .table-page{
    text-align: center;
    padding-top: 8px;
  }
  .van-pagination{
    font-size: 12px;
    width: 100px;
  }
  .van-pagination__item{
    width: 20px;
    min-width: 20px;;
    height: 20px;
  }
  .van-pagination__page-desc{
    height: 20px;
    width: 35px;
  }
  [class*=van-hairline]::after{
    border: 0;
  }
  .van-pagination__item--disabled{
    background-color: #fff;
  }
  .van-page{
    width: 100px;
    margin-left: 30px;
  }
  .van-page-warring{
    width: 100px;
    margin-left: 135px;
  }
  .amap-info-outer, .amap-menu-outer{
    border-radius: 4px;
  }
  .amap-info-outer .info{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    color: #000;
  }

  .amap-info-outer .info-top{
    font-family: "Microsoft YaHei" ! important;
    font-size: 14.5px;
    font-weight: bold;
    height: 24px;
    color: #1c7cd5;
    margin-left: 5px;
  }

  .amap-info-outer .info-middle{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    height: 110px;
    color: #000;
    margin-left: 5px;
    line-height:1.8;
  }

  .amap-info-outer .info-bt{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    color: #0f7dd1;
    text-align: center;
  }

  .amap-info-outer .info-bt a{
    color:#0f7dd1;
    text-decoration:none;
    font-weight: bold;
  }

  .amap-info-outer .info-bt a:hover{
    color:#0f7dd1;
    text-decoration:none;
    font-weight: bold;
  }

  .amap-info-outer .map-info-close{
    line-height: 2;
    top: 12px;
  }
</style>
